<template>
    <div id="multisignscatter">
        <div id="multisign"></div>
        <div id="multisignData">
          <el-button type="primary" plain @click="RandomData">随机数</el-button>
          <el-table :data="data" height="200" style="width: 100%;">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="x" label="x坐标"></el-table-column>
            <el-table-column prop="y" label="y坐标"></el-table-column>
            <el-table-column prop="value" label="数值"></el-table-column>
            <el-table-column prop="category" label="种类"></el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
import {MultiSignScatterChart} from './MultiSignScatterChart'
export default {
  data () {
    return {
      data: [],
      chart: {},
      category: []
    }
  },
  created () {
    this.setCategory()
    this.setData()
    this.chart = new MultiSignScatterChart('multisign')
  },
  mounted () {
    this.chart.xLabel = 'Time'
    this.chart.yLabel = 'Number'
    this.chart.title = 'Scatter'
    this.chart.category = this.category
    this.chart.data = this.data
    this.chart.draw()
  },
  methods: {
    setCategory () {
      this.category = []
      let cateNum = Math.random() * 3 + 2
      for (let i = 0; i < cateNum; ++i) {
        this.category.push('cate-' + (i + 1))
      }
    },
    setData () {
      this.data = []
      let dataNum = Math.random() * 5 + 5
      for (let i = 0; i < dataNum; ++i) {
        this.data.push({
          id: i,
          x: parseInt(Math.random() * 15),
          y: parseInt(Math.random() * 30),
          value: parseInt(Math.random() * 15),
          category: this.category[parseInt(Math.random() * (this.category.length))]
        })
      }
    },
    RandomData () {
      this.setCategory()
      this.setData()
      this.chart.category = this.category
      this.chart.data = this.data
      this.chart.update()
    }
  }
}
</script>
<style scoped>
#multisignscatter {
    height: 100%;
    width: 100%;
}
#multisign {
    height: 70%;
    width: 100%;
}
#multisignData {
    height: 30%;
    width: 100%;
}
</style>
